<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      table.game {
        font-size: 14px;
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
      }
      table.game td {
        border: 1px solid #e1e1e1;
        padding: 0;
        height: 30px;
        text-align: center;
      }
      table.game td.current {
        background: #1890ff;
      }
    </style>
  </head>

  <body>
    <div id="jsContainer">
      <table class="game">
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="current"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <script type="text/javascript">
      /**
       * 一道思路很清晰没啥坑的动态改变样式的题
       * 无论是边界条件还是渲染方式应该都难不到小友，这里需要注意的是
       * rowIndex和cellIndex两个属性，
       * 前者作用在tr上即行元素，值是表格中该行的索引
       * 后者作用在td或th上即单元格元素，值是表格中该单元格的索引
       */
      bind();
      function bind() {
        document.onkeydown = (event) => {
          if (!event) return;
          var code = event.keyCode || "";
          if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return;
          event.preventDefault && event.preventDefault();
          //TODO: 请实现按键控制
          let tbody = document.getElementsByTagName("tbody")[0];
          let currentElement = document.getElementsByClassName("current")[0];

          //总行数
          let rowNum = tbody.children.length;

          //总列数
          let colNum = tbody.children[0].children.length;

          //获取当前节点行索引
          let currentRowIndex = currentElement.parentNode.rowIndex;

          //获取当前节点列索引
          let currentColIndex = currentElement.cellIndex;

          //移除当前节点高亮
          currentElement.classList.remove("current");

          switch (code) {
            case 38: //上
              currentRowIndex--;
              //边界处理
              if (currentRowIndex == -1) currentRowIndex = rowNum - 1;
              break;
            case 40: //下
              currentRowIndex++;
              if (currentRowIndex == rowNum) currentRowIndex = 0;
              break;
            case 37: //左
              currentColIndex--;
              if (currentColIndex == -1) currentColIndex = colNum - 1;
              break;
            case 39: //右
              currentColIndex++;
              if (currentColIndex == colNum) currentColIndex = 0;
              break;
          }

          //重新渲染
          tbody.children[currentRowIndex].children[
            currentColIndex
          ].classList.add("current");
        };
      }
    </script>
  </body>
</html>
